import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, BoxGeometry,
  MeshBasicMaterial, Mesh, WebGLRenderer, Vector3,
  LineBasicMaterial, Line, BufferGeometry, PlaneGeometry,
  SphereGeometry, CircleGeometry, CylinderGeometry,
  TetrahedronGeometry, OctahedronGeometry, IcosahedronGeometry,
  TorusGeometry, TorusKnotGeometry, TubeGeometry
} from 'three';

const { Math } = window;
const { PI } = Math;

//画坐标轴
const drawAxes = scene => {
  //x轴(这里使用BoxGeometry也是可以的, 但查阅之后发现BufferGeometry性能更好)
  const xGeo = new BufferGeometry();
  const xGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(3, 0, 0)
  ];
  xGeo.setFromPoints(xGeoPoints);
  const xMat = new LineBasicMaterial({
    color: 0xff0000
  });
  const xAxis = new Line(xGeo, xMat);
  scene.add(xAxis);

  //y轴
  const yGeo = new BufferGeometry();
  const yGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(0, 3, 0)
  ];
  yGeo.setFromPoints(yGeoPoints);
  const yMat = new LineBasicMaterial({
    color: 0x00ff00
  });
  const yAxis = new Line(yGeo, yMat);
  scene.add(yAxis);

  //z轴
  const zGeo = new BufferGeometry();
  const zGeoPoint = [
    new Vector3(0, 0, 0),
    new Vector3(0, 0, 3)
  ];
  zGeo.setFromPoints(zGeoPoint);
  const zMat = new LineBasicMaterial({
    color: 0x00ccff
  });
  const zAxis = new Line(zGeo, zMat);
  scene.add(zAxis);

};

//画几何体
const drawBox = (scene, material) => {
  const box = new BoxGeometry(1, 2, 3, 2, 2, 3);
  const mesh = new Mesh(box, material);
  scene.add(mesh);
};

//画平面
const drawPlane = (scene, material) => {
  const plane = new PlaneGeometry(2, 4);
  const mesh = new Mesh(plane, material);
  scene.add(mesh);
};

//画球体
const drawSphere = (scene, material) => {
  const sphere = new SphereGeometry(3, 8, 6);
  
  // const sphere = new SphereGeometry(3, 18, 12);

  // const sphere = new SphereGeometry(3, 8, 6, PI / 6, PI, PI / 3);

  // const sphere = new SphereGeometry(3, 8, 6, 0, PI * 2, PI / 6, PI / 3);

  // const sphere = new SphereGeometry(3, 8, 6, PI / 2, PI, PI / 6, PI / 2);

  // const sphere = new SphereGeometry(3, 8, 6, 0, PI * 2, PI / 6, PI / 2);

  // const sphere = new SphereGeometry(3, 8, 6, PI / 2, PI, PI / 6, PI / 2);

  const mesh = new Mesh(sphere, material);
  scene.add(mesh);
};

//画圆
const drawCircle = (scene, material) => {
  const circle = new CircleGeometry(3, 18, PI / 3, PI / 3 * 4);
  const mesh = new Mesh(circle, material);
  scene.add(mesh);
};

//画圆柱
const drawCylinder = (scene, material) => {
  const cylinder = new CylinderGeometry(2, 2, 4, 18, 3);
  // const cylinder = new CylinderGeometry(2, 3, 4, 18, 3);
  // const cylinder = new CylinderGeometry(2, 3, 4, 18, 3, true);
  const mesh = new Mesh(cylinder, material);
  scene.add(mesh);
};

//画正四面体
const drawTetra = (scene, material) => {
  const tetra = new TetrahedronGeometry(3);
  const mesh = new Mesh(tetra, material);
  scene.add(mesh);
};

//画正八面体
const drawOcta = (scene, material) => {
  const octa = new OctahedronGeometry(3);
  const mesh = new Mesh(octa, material);
  scene.add(mesh);
};

//画正二十面体
const drawIcosa = (scene, material) => {
  const icosa = new IcosahedronGeometry(3);
  const mesh = new Mesh(icosa, material);
  scene.add(mesh);
};

//画圆环
const drawTorus = (scene, material) => {
  const torus = new TorusGeometry(3, 1, 4, 8);
  // const torus = new TorusGeometry(3, 1, 12, 18);
  // const torus = new TorusGeometry(3, 1, 4, 8, PI / 3 * 2);

  const mesh = new Mesh(torus, material);
  scene.add(mesh);
};

//画圆环节
const drawTorusKnot = (scene, material) => {
  const torusKnot = new TorusKnotGeometry(2, 0.5, 32, 8);
  const mesh = new Mesh(torusKnot, material);
  scene.add(mesh);
};

//画管道几何体(版本更新导致构造函数参数变化, 暂缓执行)
// const drawTube = (scene, material) => {
//   const tube = new TubeGeometry(1, 0.5);
//   const mesh = new Mesh(tube);
//   scene.add(mesh);
// };

class Index extends PureComponent {

  componentDidMount() {
    const scene = new Scene();

    const camera = new OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
    camera.position.set(25, 25, 25);
    //设置照相机的lookAt
    camera.lookAt(0, 0, 0);

    const material = new MeshBasicMaterial({
      color: 0xffff00,
      wireframe: true
    });

    //坐标轴
    drawAxes(scene);

    drawBox(scene, material);

    const canvas = document.getElementById('mainCanvas');
    const renderer = new WebGLRenderer({
      canvas
    });
    renderer.render(scene, camera);

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400px"
        height="300px"
      />
    );
  }
}

export default Index;